<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>

</body>
<script type="module">
    // import {
    //     defineAsyncComponent,
    //     render,
    //     h
    // } from '/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.prod.js'
    import {
        defineAsyncComponent,
        render,
        h
    } from "./runtime-dom.js"

    // 异步组件
    let asyncComponent = import('./AsyncComponent.js')
    // let com = defineAsyncComponent(() => asyncComponent)

    // 异步组件的原理 跟图片懒加载类似 img.src='loadding' onload 之后 src='真实图片'
    //基于状态来实现 loading? h('div', 'loading') : h(asyncComponent)
    // let com = defineAsyncComponent(() => {
    //     return new Promise((resolve, reject) => {
    //         setTimeout(() => {
    //             resolve({
    //                 render() {
    //                     return h('div', '异步组件ooo')
    //                 }
    //             })
    //         }, 3000)
    //     })
    // })

    // 这里有一个特殊的情况 1000ms 加载失败 展示错误组件 但是3000ms之后又加载成功重新展示组件
    let index = 2
    let i = 0
    let com = defineAsyncComponent({

        loader: () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // resolve({
                    //     render() {
                    //         return h('div', '异步组件ooo')
                    //     }
                    // })
                    if (i++ == 2) {
                        resolve({
                            render() {
                                return h('div', '异步组件ooo')
                            }
                        })
                    } else {
                        reject({
                            render() {
                                return h('div', '加载失败')
                            }
                        })
                    }

                }, 3000)
            })
        },
        errorComponent: {
            props: {
                error: {
                    type: Object,
                    default: () => { }
                }
            },

            render(props) {
                console.log(props.error);

                return h('div', 'error',)
            }
        },
        loadingComponent: {
            render() {
                return h('div', 'loading')
            }
        },
        // 延迟时间 如果500ms 组件加载完成 展示组件 否则展示loading组件 防止闪烁
        delay: 500,
        timeout: 1000,
        onError(err, retry, fail, attempt) {
            console.log('加载失败', err, attempt)
            setTimeout(() => {
                retry()
                console.log('重试')
            }, 1000)
        }
    })
    // // render 函数 第一个参数 虚拟dom 第二个参数 容器
    render(h(com), document.getElementById('app'))

</script>

</html>